//@ts-nocheck
import React from '../../react';
// import React from 'react';
import ReactDOM from '../../react-dom';
// import ReactDOM,{unstable_batchedUpdates} from 'react-dom';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {number:0}
    // setInterval(()=>{
    //   this.setState({number: this.state.number + 1});
    // },1000)

    /** ↓报错: Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the Counter component.*/
    // this.setState({number: this.state.number + 1});
  }

  // React中执行事件处理函数的时候, 会先进入批量更新模式(updateQueue.isPending = true)
  // 不会立即更新state,而是会先把这个状态缓存起来,在事件函数执行完成之后再全部更新这个脏组件(需要更新的组件)
  handleClick = () => {
    /*this.setState({number: this.state.number + 1});
    // console.log(this.state.number); //0
    this.setState({number: this.state.number + 1});
    // console.log(this.state.number); //0

    //↓因为这里是异步的,在handleClick同步代码执行完时,已经将updateQueue.isPending=false了(参见event.tsx里的dispatchEvent方法),故setTimeout里的this.setState会直接更新
    setTimeout(() => {
      this.setState({number: this.state.number + 1});
      console.log(this.state.number); //2
      this.setState({number: this.state.number + 1});
      console.log(this.state.number); //3

      // 屏蔽掉上面↑
      // unstable_batchedUpdates(()=>{ // 可实现在异步回调里执行批量更新
      //   this.setState({number: this.state.number + 1});
      //   console.log(this.state.number); //1
      //   this.setState({number: this.state.number + 1});
      //   console.log(this.state.number); //1
      // })
    });*/

    this.setState(state => ({number: state.number + 1}));
    /** ↓批量更新模式下 state.number 此时还没有变, 除非是非批量更新模式下 才会同步变化*/
    console.log(this.state.number); //0

    this.setState(state => ({number: state.number + 1}));
    console.log(this.state.number); //0

    setTimeout(() => {
      // 屏蔽掉上面↑
      // unstable_batchedUpdates(()=>{ // 可实现在异步回调里执行批量更新
      //   this.setState(state => ({number: state.number + 1}));
      //   console.log(this.state.number); //2
      //   this.setState(state => ({number: state.number + 1}));
      //   console.log(this.state.number); //2
      // })

      this.setState(state => ({number: state.number + 1}));
      console.log(this.state.number); //3
      this.setState(state => ({number: state.number + 1}));
      console.log(this.state.number); //4
    });
  };

  componentDidMount(){
    /** componentDidMount里调用 this.setState 也是批量更新的*/
    // this.setState({number: this.state.number + 1});
    // console.log(this.state.number); // 0
    // this.setState({number: this.state.number + 1});
    // console.log(this.state.number); // 0
  }

  render(){
    /** ↓报错: Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.*/
    // 因为这样相当于就死循环了
    // this.setState({number: this.state.number + 1});

    return (
      <div>
        {this.state.number}
        <div id={'counter' + this.state.number} onClick={this.handleClick} style={{border:'1px solid black'}}>改变本元素id</div>
      </div>
    );
  }
}
console.log(111);
ReactDOM.render(
  <Counter/>,
  document.getElementById('root')
);
